<template>
  <div id="listMessCard">
    <!-- 每一项Card -->
    <div class="messCard" v-for="item in props.dataList" :key="item.id">
      <img :src="item.coverImg || cardCover" alt="cover" class="cardCover" />
      <div class="cardtitle">{{ item.title }}</div>
      <div class="userInfo">
        <div class="leftUserInfo">
          <img :src="item.user?.userAvatar || DEFAULTAVATAR" alt="avatar" class="cardAvatar" />
          <div class="username">{{ item.userName ?? '匿名' }}</div>
        </div>
        <div class="rightUserInfo">
          <img src="../assets/爱心.png" alt="favorite" width="16" class="favoriteIcon" />
          <div class="favorCount">{{ item.favorCount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import cardCover from '@/assets/cardImg.jpg'
import { DEFAULTAVATAR } from '@/constant'

interface Props {
  dataList?: API.ContentVO[]
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
})
</script>
<style scoped>
#listMessCard {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.messCard {
  width: 150px;
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.cardCover {
  width: 100%;
  height: 70%;
  cursor: pointer;
  object-fit: cover;
}
.cardAvatar {
  margin-top: 5px;
  width: 32px;
  height: 32px;
  vertical-align: middle;
  border-radius: 50%;
  cursor: pointer;
}
.cardtitle {
  margin-top: 10px;
}
.userInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.username {
  margin-left: 5px;
  font-size: 12px;
  color: #666;
}
.leftUserInfo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.rightUserInfo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.favorCount {
  margin-right: 5px;
  font-size: 12px;
  color: #666;
}
.favoriteIcon {
  cursor: pointer;
}
</style>
